<template>
  <view class="admin-container">
    <!-- 管理员头部 -->
    <view class="admin-header">
      <view class="header-content">
        <text class="admin-title">🛡️ 管理员控制台</text>
        <text class="admin-subtitle">系统管理与用户权限控制</text>
      </view>
      <view class="admin-badge">
        <text class="badge-text">管理员</text>
      </view>
    </view>

    <!-- 统计概览 -->
    <view class="stats-overview">
      <view class="stat-card">
        <text class="stat-number">{{ userStats.totalUsers }}</text>
        <text class="stat-label">总用户数</text>
      </view>
      <view class="stat-card">
        <text class="stat-number">{{ userStats.activeUsers }}</text>
        <text class="stat-label">活跃用户</text>
        <text class="stat-note">*统计进入聊天的用户</text>
      </view>
      <view class="stat-card">
        <text class="stat-number">{{ userStats.adminUsers }}</text>
        <text class="stat-label">管理员</text>
      </view>
      <view class="stat-card">
        <text class="stat-number">{{ announcements.length }}</text>
        <text class="stat-label">公告数量</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="admin-menu">
      <view class="menu-section">
        <text class="section-title">用户管理</text>
        <view class="menu-grid">
          <view class="menu-item" @click="navigateToUserManagement">
            <text class="menu-icon">👥</text>
            <text class="menu-name">用户管理</text>
            <text class="menu-desc">查看和管理所有用户</text>
          </view>
        </view>
      </view>

      <view class="menu-section">
        <text class="section-title">系统管理</text>
        <view class="menu-grid">
          <view class="menu-item" @click="navigateToAnnouncementManagement">
            <text class="menu-icon">📢</text>
            <text class="menu-name">公告管理</text>
            <text class="menu-desc">发布和管理系统公告</text>
          </view>
          <view class="menu-item" @click="navigateToSystemSettings">
            <text class="menu-icon">⚙️</text>
            <text class="menu-name">系统设置</text>
            <text class="menu-desc">配置系统参数</text>
          </view>
          <view class="menu-item" @click="showChatServiceConfig">
            <text class="menu-icon">💬</text>
            <text class="menu-name">聊天服务配置</text>
            <text class="menu-desc">配置Firebase和Supabase服务</text>
          </view>
          <view class="menu-item" @click="showChatQuotaMonitor">
            <text class="menu-icon">📊</text>
            <text class="menu-name">额度监控</text>
            <text class="menu-desc">查看服务使用情况和剩余额度</text>
          </view>
        </view>
      </view>

    </view>

    <!-- 快速操作 -->
    <view class="quick-actions">
      <text class="section-title">快速操作</text>
      <view class="action-buttons">
        <button class="action-btn primary" @click="showCreateAnnouncementModal">
          <text class="btn-icon">📢</text>
          <text class="btn-text">发布公告</text>
        </button>
        <button class="action-btn secondary" @click="showUserSearchModal">
          <text class="btn-icon">🔍</text>
          <text class="btn-text">搜索用户</text>
        </button>
        <button class="action-btn warning" @click="showSystemStatusModal">
          <text class="btn-icon">📈</text>
          <text class="btn-text">系统状态</text>
        </button>
      </view>
    </view>

    <!-- 最近活动 -->
    <view class="recent-activities">
      <text class="section-title">最近活动</text>
      <view class="activity-list">
        <view 
          v-for="(activity, index) in recentActivities" 
          :key="index"
          class="activity-item"
        >
          <view class="activity-icon" :class="activity.type">
            <text class="icon-text">{{ activity.icon }}</text>
          </view>
          <view class="activity-content">
            <text class="activity-title">{{ activity.title }}</text>
            <text class="activity-time">{{ activity.time }}</text>
          </view>
          <view class="activity-status" :class="activity.status">
            <text class="status-text">{{ activity.statusText }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 发布公告弹窗 -->
    <!-- 发布公告弹窗 -->
    <BaseModal 
      :visible="showAnnouncementModal" 
      title="📢 发布公告"
      priority="normal"
      width="90%"
      max-width="700rpx"
      @close="closeAnnouncementModal"
    >
      <view class="form-group">
        <text class="form-label">公告标题</text>
        <input 
          class="form-input" 
          v-model="newAnnouncement.title" 
          placeholder="请输入公告标题"
          maxlength="50"
        />
      </view>
      <view class="form-group">
        <text class="form-label">公告内容</text>
        <textarea 
          class="form-textarea" 
          v-model="newAnnouncement.content" 
          placeholder="请输入公告内容"
          maxlength="500"
        />
      </view>
      <view class="form-group">
        <text class="form-label">公告类型</text>
        <view class="type-selector" @click="showTypeSelector">
          <text class="type-text">{{ announcementTypes[announcementTypeIndex] }}</text>
          <text class="type-arrow">></text>
        </view>
      </view>
      
      <template #footer>
        <button class="modal-btn cancel" @click="closeAnnouncementModal">取消</button>
        <button class="modal-btn confirm" @click="publishAnnouncement">发布</button>
      </template>
    </BaseModal>

    <!-- 用户搜索弹窗 -->
    <BaseModal 
      :visible="showUserSearchModal" 
      title="🔍 搜索用户"
      priority="normal"
      width="90%"
      max-width="700rpx"
      @close="closeUserSearchModal"
    >
      <view class="search-section">
        <input 
          class="search-input" 
          v-model="searchKeyword" 
          placeholder="输入用户名或邮箱"
          @input="searchUsers"
        />
      </view>
      <view class="search-results">
        <view 
          v-for="(user, index) in searchResults" 
          :key="index"
          class="user-item"
        >
          <view class="user-avatar">
            <text class="avatar-text">{{ user.name ? user.name.charAt(0) : 'U' }}</text>
          </view>
          <view class="user-info">
            <text class="user-name">{{ user.name || '未设置' }}</text>
            <text class="user-email">{{ user.email }}</text>
          </view>
          <view class="user-role" :class="getRoleClass(user.role)">
            <text class="role-text">{{ getRoleText(user.role) }}</text>
          </view>
        </view>
      </view>
    </BaseModal>

    <!-- 聊天服务配置弹窗 -->
    <BaseModal 
      :visible="showChatServiceConfigModal" 
      title="💬 聊天服务配置"
      priority="normal"
      width="90%"
      max-width="600rpx"
      @close="closeChatServiceConfigModal"
    >
      <view class="config-section">
        <text class="config-title">当前服务: {{ chatServiceStatus.currentService }}</text>
        <view class="service-options">
          <view 
            v-for="service in availableServices" 
            :key="service"
            class="service-option"
            :class="{ 'selected': service === chatServiceStatus.currentService }"
            @click="switchChatService(service)"
          >
            <text class="service-name">{{ getServiceDisplayName(service) }}</text>
            <text v-if="service === chatServiceStatus.currentService" class="check-icon">✓</text>
          </view>
        </view>
      </view>
    </BaseModal>

    <!-- 聊天额度监控弹窗 -->
    <BaseModal 
      :visible="showChatQuotaMonitorModal" 
      title="📊 聊天服务额度监控"
      priority="normal"
      width="90%"
      max-width="600rpx"
      @close="closeChatQuotaMonitorModal"
    >
      <view class="quota-section">
        <view class="quota-item">
          <text class="quota-label">当前服务</text>
          <text class="quota-value">{{ getServiceDisplayName(chatServiceStatus.currentService) }}</text>
        </view>
        <view class="quota-item" v-if="chatServiceStatus.quota">
          <text class="quota-label">已使用</text>
          <text class="quota-value">{{ chatServiceStatus.quota.used }}</text>
        </view>
        <view class="quota-item" v-if="chatServiceStatus.quota">
          <text class="quota-label">总限额</text>
          <text class="quota-value">{{ chatServiceStatus.quota.limit }}</text>
        </view>
        <view class="quota-item" v-if="chatServiceStatus.quota">
          <text class="quota-label">剩余额度</text>
          <text class="quota-value">{{ chatServiceStatus.quota.limit - chatServiceStatus.quota.used }}</text>
        </view>
      </view>
    </BaseModal>

    <!-- 公告类型选择器（嵌套弹窗） -->
    <SheetModal 
      :visible="showTypeSelectorModal" 
      title="选择公告类型"
      priority="important"
      :show-close="true"
      @close="closeTypeSelector"
    >
      <view class="selector-list">
        <view
          v-for="(type, index) in announcementTypes"
          :key="index"
          class="selector-item"
          :class="{ 'selected': announcementTypeIndex === index }"
          @click="selectAnnouncementType(index)"
        >
          <text class="selector-text">{{ type }}</text>
          <text v-if="announcementTypeIndex === index" class="selector-check">✓</text>
        </view>
      </view>
    </SheetModal>

    <!-- 角色选择器（嵌套弹窗） -->
    <SheetModal 
      :visible="showRoleSelectorModal" 
      title="选择角色"
      priority="important"
      :show-close="true"
      @close="closeRoleSelector"
    >
      <view class="selector-list">
        <view
          v-for="(role, index) in roleOptions"
          :key="index"
          class="selector-item"
          :class="{ 'selected': userListRole === role.value }"
          @click="selectRole(role.value, role.label)"
        >
          <text class="selector-text">{{ role.label }}</text>
          <text v-if="userListRole === role.value" class="selector-check">✓</text>
        </view>
      </view>
    </SheetModal>

    <!-- 状态选择器（嵌套弹窗） -->
    <SheetModal 
      :visible="showStatusSelectorModal" 
      title="选择状态"
      priority="important"
      :show-close="true"
      @close="closeStatusSelector"
    >
      <view class="selector-list">
        <view
          v-for="(status, index) in statusOptions"
          :key="index"
          class="selector-item"
          :class="{ 'selected': userListStatus === status.value }"
          @click="selectStatus(status.value, status.label)"
        >
          <text class="selector-text">{{ status.label }}</text>
          <text v-if="userListStatus === status.value" class="selector-check">✓</text>
        </view>
      </view>
    </SheetModal>

    <!-- 编辑用户弹窗（嵌套弹窗） -->
    <BaseModal 
      :visible="showEditUserModalFlag" 
      title="编辑用户"
      priority="important"
      width="90%"
      max-width="650rpx"
      @close="closeEditUserModal"
    >
      <view class="edit-user-content" v-if="editingUser">
        <view class="user-info-section">
          <view class="user-avatar-large">
            <text class="avatar-text-large">{{ editingUser.name ? editingUser.name.charAt(0) : 'U' }}</text>
          </view>
          <view class="user-details">
            <text class="user-detail-name">{{ editingUser.name || '未设置' }}</text>
            <text class="user-detail-email">{{ editingUser.email }}</text>
            <text class="user-detail-time">注册时间: {{ formatDate(editingUser.created_at) }}</text>
          </view>
        </view>

        <view class="edit-section">
          <view class="form-group">
            <text class="form-label">用户角色</text>
            <view class="role-selector">
              <view
                v-for="role in availableRoles"
                :key="role.value"
                class="role-option"
                :class="{ 'selected': editingUser.role === role.value }"
                @click="editingUser.role = role.value"
              >
                <text class="role-option-text">{{ role.label }}</text>
                <text v-if="editingUser.role === role.value" class="role-option-check">✓</text>
              </view>
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">用户状态</text>
            <view class="status-selector">
              <view
                v-for="status in ['active', 'banned']"
                :key="status"
                class="status-option"
                :class="{ 'selected': editingUser.status === status }"
                @click="editingUser.status = status"
              >
                <text class="status-option-text">{{ getStatusText(status) }}</text>
                <text v-if="editingUser.status === status" class="status-option-check">✓</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <template #footer>
        <button class="edit-btn cancel" @click="closeEditUserModal">取消</button>
        <button class="edit-btn save" @click="saveUserInfo">保存</button>
      </template>
    </BaseModal>

  </view>
  
  <!-- 用户管理弹窗 -->
  <BaseModal 
    :visible="showUserListModalFlag" 
    title="👥 用户管理"
    priority="normal"
    width="95%"
    max-width="900rpx"
    max-height="85vh"
    @close="closeUserListModal"
  >
    <!-- 搜索和筛选 -->
    <view class="search-section">
      <view class="search-row">
        <input
          class="search-input"
          v-model="userListKeyword"
          placeholder="搜索用户名或邮箱"
          @confirm="searchUserList"
        />
        <button class="search-btn" @click="searchUserList">搜索</button>
      </view>
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">角色:</text>
          <view class="filter-picker" @click="showRoleSelector">
            {{ userListRoleDisplay || '全部' }}
            <text class="picker-arrow">▼</text>
          </view>
        </view>
        <view class="filter-item">
          <text class="filter-label">状态:</text>
          <view class="filter-picker" @click="showStatusSelector">
            {{ userListStatusDisplay || '全部' }}
            <text class="picker-arrow">▼</text>
          </view>
        </view>
        <button class="reset-btn" @click="resetUserListSearch">重置</button>
      </view>
    </view>

    <!-- 用户列表 -->
    <view class="user-list-section">
      <view v-if="userListLoading" class="loading-section">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="userList.length === 0" class="empty-section">
        <text class="empty-text">暂无用户数据</text>
      </view>
      <view v-else class="user-list">
        <view 
          v-for="(user, index) in userList" 
          :key="user.id"
          class="user-item"
          @click="editUser(user)"
        >
          <view class="user-avatar">
            <text class="avatar-text">{{ user.name ? user.name.charAt(0) : 'U' }}</text>
          </view>
          <view class="user-info">
            <text class="user-name">{{ user.name || '未设置' }}</text>
            <text class="user-email">{{ user.email }}</text>
            <text class="user-time">注册时间: {{ formatDate(user.created_at) }}</text>
          </view>
          <view class="user-actions">
            <view class="user-role" :class="getRoleClass(user.role)">
              <text class="role-text">{{ getRoleText(user.role) }}</text>
            </view>
            <view class="user-status" :class="getStatusClass(user.status)">
              <text class="status-text">{{ getStatusText(user.status) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 分页 -->
    <view v-if="userListTotal > userListPageSize" class="pagination-section">
      <view class="pagination-info">
        <text class="pagination-text">共 {{ userListTotal }} 条记录，第 {{ userListPage }} 页</text>
      </view>
      <view class="pagination-buttons">
        <button 
          class="page-btn" 
          :disabled="userListPage <= 1"
          @click="changeUserListPage(userListPage - 1)"
        >上一页</button>
        <button 
          class="page-btn" 
          :disabled="userListPage * userListPageSize >= userListTotal"
          @click="changeUserListPage(userListPage + 1)"
        >下一页</button>
      </view>
    </view>
  </BaseModal>
</template>

<script>
import apiService from '../../utils/api-service.js'
import appStateManager from '../../utils/app-state-manager.js'
import BaseModal from '../../components/BaseModal.vue'
import SheetModal from '../../components/SheetModal.vue'
import chatService from '../../utils/websocket-chat-service.js'
import { ROLE_ADMIN, DEFAULT_ROLE_OPTIONS, getRoleClass } from '../../utils/constants.js'

export default {
  components: {
    BaseModal,
    SheetModal
  },
  
  data() {
    return {
      userStats: {
        totalUsers: 0,
        activeUsers: 0,
        adminUsers: 0
      },
      announcements: [],
      recentActivities: [
        {
          icon: '👤',
          title: '新用户注册',
          time: '2分钟前',
          type: 'user',
          status: 'success',
          statusText: '成功'
        },
        {
          icon: '📢',
          title: '发布系统公告',
          time: '1小时前',
          type: 'announcement',
          status: 'success',
          statusText: '已发布'
        },
        {
          icon: '🔐',
          title: '权限更新',
          time: '3小时前',
          type: 'permission',
          status: 'warning',
          statusText: '待确认'
        }
      ],
      
      // 公告相关
      showAnnouncementModal: false,
      newAnnouncement: {
        title: '',
        content: '',
        type: 'info'
      },
      announcementTypes: ['系统通知', '功能更新', '维护公告', '活动通知'],
      announcementTypeIndex: 0,
      
      // 用户搜索相关
      showUserSearchModal: false,
      searchKeyword: '',
      searchResults: [],
      
      // 用户列表相关
      showUserListModalFlag: false,
      userList: [],
      userListPage: 1,
      userListPageSize: 10,
      userListTotal: 0,
      userListLoading: false,
      userListKeyword: '',
      userListRole: '',
      userListStatus: '',
      userListRoleDisplay: '全部',
      userListStatusDisplay: '全部',

      // 自定义选择器相关
      showRoleSelectorModal: false,
      showStatusSelectorModal: false,
      roleOptions: [
        { value: '', label: '全部' }
        // 角色列表将从后端API动态加载
      ],
      availableRoles: [], // 从后端获取的完整角色列表（不含"全部"选项）
      statusOptions: [
        { value: '', label: '全部' },
        { value: 'active', label: '正常' },
        { value: 'banned', label: '封禁' }
      ],

      // 编辑用户相关
      showEditUserModalFlag: false,
      editingUser: null,
      
      // 聊天服务相关
      showChatServiceConfigModal: false,
      showChatQuotaMonitorModal: false,
      chatServiceStatus: {
        currentService: 'firebase',
        isConnected: false,
        quota: null
      },
      availableServices: ['firebase', 'supabase', 'local'],
      
      // 类型选择器相关
      showTypeSelectorModal: false
    }
  },
  
  onLoad() {
    this.checkAdminPermission()
    this.loadUserStats()
    this.loadAnnouncements()
    this.initChatService()
  },

  onUnload() {
    // 清理资源
  },
  
  methods: {
    // 检查管理员权限
    checkAdminPermission() {
      try {
        const currentUser = uni.getStorageSync('currentUser')
        if (!currentUser) {
          this.showAccessDenied()
          return
        }
        
        const userData = JSON.parse(currentUser)
        // 使用常量进行权限检查
        if (userData.role !== ROLE_ADMIN) {
          this.showAccessDenied()
          return
        }
        
        console.log('管理员权限验证通过')
        
        // 加载角色列表
        this.loadRoles()
      } catch (error) {
        console.error('权限检查失败:', error)
        this.showAccessDenied()
      }
    },
    
    // 从后端加载角色列表
    async loadRoles() {
      try {
        console.log('开始加载角色列表...')
        const response = await apiService.getRoles()
        
        if (response && response.code === 'SUCCESS' && Array.isArray(response.data)) {
          console.log('角色列表加载成功:', response.data)
          
          // 保存完整角色列表（用于编辑用户）
          this.availableRoles = response.data
          
          // 构建筛选器选项（添加"全部"选项）
          this.roleOptions = [
            { value: '', label: '全部' },
            ...response.data.map(role => ({
              value: role.value,
              label: role.label
            }))
          ]
          
          console.log('角色选项已更新:', this.roleOptions)
        } else {
          console.warn('角色列表格式异常:', response)
          // 使用默认角色列表作为后备
          this.setDefaultRoles()
        }
      } catch (error) {
        console.error('加载角色列表失败:', error)
        // 使用默认角色列表作为后备
        this.setDefaultRoles()
      }
    },
    
    // 设置默认角色列表（后备方案，使用常量）
    setDefaultRoles() {
      console.log('使用默认角色列表')
      this.availableRoles = DEFAULT_ROLE_OPTIONS
      this.roleOptions = [
        { value: '', label: '全部' },
        ...DEFAULT_ROLE_OPTIONS.map(role => ({
          value: role.value,
          label: role.label
        }))
      ]
    },
    
    showAccessDenied() {
      uni.showModal({
        title: '访问被拒绝',
        content: '您没有管理员权限，无法访问此页面',
        showCancel: false,
        success: () => {
          uni.navigateBack()
        }
      })
    },
    
    // 加载用户统计
    async loadUserStats() {
      try {
        // 使用后端API获取所有统计数据，包括活跃用户数
        const response = await apiService.getAdminUserStats()
        if (response.code === 'SUCCESS') {
          // 使用后端统计的活跃用户数（更准确）
          this.userStats = {
            totalUsers: response.data.total_users || 0,
            activeUsers: response.data.active_users || 0, // 使用后端统计的活跃用户数
            adminUsers: response.data.admin_users || 0,
            bannedUsers: response.data.banned_users || 0,
            newUsersToday: response.data.new_users_today || 0
          }
          console.log('用户统计数据已更新:', this.userStats)
        } else {
          console.error('获取用户统计失败:', response.message)
          // 使用默认数据
          this.userStats = {
            totalUsers: 0,
            activeUsers: 0,
            adminUsers: 0
          }
        }
      } catch (error) {
        console.error('加载用户统计失败:', error)
        // 使用默认数据
        this.userStats = {
          totalUsers: 0,
          activeUsers: 0,
          adminUsers: 0
        }
      }
    },

    
    // 加载公告列表
    async loadAnnouncements() {
      try {
        const response = await apiService.getAdminAnnouncementList({
          page: 1,
          pageSize: 10
        })
        if (response.code === 'SUCCESS') {
          this.announcements = response.data.announcements || []
        } else {
          console.error('获取公告列表失败:', response.message)
          this.announcements = []
        }
      } catch (error) {
        console.error('加载公告失败:', error)
        this.announcements = []
      }
    },
    
    // 初始化聊天服务
    async initChatService() {
      try {
        await chatService.init()
        this.updateChatServiceStatus()
        
        // 监听聊天服务状态变化
        chatService.onStatusChange((status) => {
          this.chatServiceStatus = {
            currentService: status.service,
            isConnected: status.status === 'connected',
            quota: status.quota
          }
        })
      } catch (error) {
        console.error('初始化聊天服务失败:', error)
      }
    },
    
    // 更新聊天服务状态
    updateChatServiceStatus() {
      const status = chatService.getServiceStatus()
      this.chatServiceStatus = {
        currentService: status.currentService,
        isConnected: status.isInitialized,
        quota: status.quota
      }
    },
    
    // 导航方法
    navigateToUserManagement() {
      console.log('点击用户管理，准备显示弹窗')
      // 显示用户管理弹窗
      this.showUserListModal()
    },
    
    navigateToAnnouncementManagement() {
      // 显示公告管理功能
      this.showAnnouncementManagement()
    },
    
    navigateToSystemSettings() {
      uni.showModal({
        title: '系统设置',
        content: '系统设置功能正在开发中，敬请期待！',
        showCancel: false
      })
    },
    
    
    // 显示公告管理
    showAnnouncementManagement() {
      uni.showModal({
        title: '公告管理',
        content: `当前公告数量: ${this.announcements.length}\n最新公告: ${this.announcements.length > 0 ? this.announcements[0].title : '无'}`,
        showCancel: true,
        cancelText: '关闭',
        confirmText: '发布新公告',
        success: (res) => {
          if (res.confirm) {
            this.showCreateAnnouncementModal()
          }
        }
      })
    },
    
    
    // ==================== 用户管理 ====================

    // 显示用户管理弹窗
    showUserListModal() {
      console.log('showUserListModal 方法被调用')

      // 关闭其他所有弹窗
      this.showUserSearchModal = false
      this.showChatServiceConfigModal = false
      this.showChatQuotaMonitorModal = false
      this.showAnnouncementModal = false
      this.showAnnouncementManagement = false
      this.showRoleSelectorModal = false
      this.showStatusSelectorModal = false
      this.showEditUserModalFlag = false

      // 显示用户管理弹窗
      this.showUserListModalFlag = true
      this.userListPage = 1
      this.userListKeyword = ''
      this.userListRole = ''
      this.userListStatus = ''
      
      // 调试信息：显示所有弹窗状态
      console.log('=== 弹窗状态调试 ===')
      console.log('用户管理弹窗:', this.showUserListModalFlag)
      console.log('用户搜索弹窗:', this.showUserSearchModal)
      console.log('聊天服务配置弹窗:', this.showChatServiceConfigModal)
      console.log('聊天配额监控弹窗:', this.showChatQuotaMonitorModal)
      console.log('公告弹窗:', this.showAnnouncementModal)
      console.log('公告管理弹窗:', this.showAnnouncementManagement)
      console.log('角色选择器弹窗:', this.showRoleSelectorModal)
      console.log('状态选择器弹窗:', this.showStatusSelectorModal)
      console.log('编辑用户弹窗:', this.showEditUserModalFlag)
      console.log('==================')
      
      this.loadUserList()
    },
    
    // 关闭用户列表弹窗
    closeUserListModal() {
      this.showUserListModalFlag = false
    },
    
    // 加载用户列表
    async loadUserList() {
      if (this.userListLoading) return
      
      this.userListLoading = true
      try {
        const params = {
          page: this.userListPage,
          pageSize: this.userListPageSize
        }
        
        if (this.userListKeyword) params.keyword = this.userListKeyword
        if (this.userListRole) params.role = this.userListRole
        if (this.userListStatus) params.status = this.userListStatus
        
        const response = await apiService.getAdminUserList(params)
        if (response.code === 'SUCCESS') {
          this.userList = response.data.users || []
          this.userListTotal = response.data.total || 0
          console.log('用户列表加载成功:', this.userList.length, '条记录')
        } else {
          throw new Error(response.message || '获取用户列表失败')
        }
      } catch (error) {
        console.error('加载用户列表失败:', error)
        uni.showToast({
          title: '加载用户列表失败',
          icon: 'error'
        })
        this.userList = []
        this.userListTotal = 0
      } finally {
        this.userListLoading = false
      }
    },
    
    // 搜索用户
    searchUserList() {
      this.userListPage = 1
      this.loadUserList()
    },
    
    // 重置搜索
    resetUserListSearch() {
      this.userListKeyword = ''
      this.userListRole = ''
      this.userListStatus = ''
      this.userListPage = 1
      this.loadUserList()
    },
    
    // 翻页
    changeUserListPage(page) {
      this.userListPage = page
      this.loadUserList()
    },
    
    // 编辑用户
    editUser(user) {
      this.showEditUserModal(user)
    },

    // 显示编辑用户弹窗
    showEditUserModal(user) {
      this.editingUser = user
      this.showEditUserModalFlag = true
    },

    // 关闭编辑用户弹窗
    closeEditUserModal() {
      this.showEditUserModalFlag = false
      this.editingUser = null
    },

    // 保存用户信息
    async saveUserInfo() {
      if (!this.editingUser) return

      try {
        // 分别调用更新角色和更新状态的API
        const promises = []

        // 更新角色（如果有角色信息）
        if (this.editingUser.role) {
          promises.push(apiService.updateUserRole(this.editingUser.id, this.editingUser.role))
        }

        // 更新状态（如果有状态信息）
        if (this.editingUser.status) {
          promises.push(apiService.banUser(this.editingUser.id, this.editingUser.status, '管理员操作'))
        }

        // 等待所有API调用完成
        const results = await Promise.all(promises)

        // 检查是否有API调用失败
        const failedResults = results.filter(result => result.code !== 'SUCCESS')
        if (failedResults.length > 0) {
          throw new Error(failedResults[0].message || '保存失败')
        }

        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        this.closeEditUserModal()
        // 重新加载用户列表
        this.loadUserList()
      } catch (error) {
        console.error('保存用户信息失败:', error)
        uni.showToast({
          title: '保存失败: ' + (error.message || '未知错误'),
          icon: 'error'
        })
      }
    },
    
    // 显示角色选择器
    showRoleSelector() {
      this.showRoleSelectorModal = true
    },

    // 关闭角色选择器
    closeRoleSelector() {
      this.showRoleSelectorModal = false
    },

    // 选择角色
    selectRole(value, label) {
      this.userListRole = value
      this.userListRoleDisplay = label
      this.closeRoleSelector()
      this.searchUserList()
    },

    // 显示状态选择器
    showStatusSelector() {
      this.showStatusSelectorModal = true
    },

    // 关闭状态选择器
    closeStatusSelector() {
      this.showStatusSelectorModal = false
    },

    // 选择状态
    selectStatus(value, label) {
      this.userListStatus = value
      this.userListStatusDisplay = label
      this.closeStatusSelector()
      this.searchUserList()
    },
    
    
    // 聊天服务配置相关方法
    showChatServiceConfig() {
      this.showChatServiceConfigModal = true
      this.updateChatServiceStatus()
    },
    
    closeChatServiceConfigModal() {
      this.showChatServiceConfigModal = false
    },
    
    async switchChatService(serviceName) {
      // 注意：当前只支持 WebSocket 服务，无需切换
      if (serviceName === 'websocket') {
        uni.showToast({
          title: '当前已使用 WebSocket 服务',
          icon: 'none'
        })
        this.closeChatServiceConfigModal()
      } else {
        uni.showToast({
          title: '当前版本仅支持 WebSocket',
          icon: 'none'
        })
      }
    },
    
    showChatQuotaMonitor() {
      this.showChatQuotaMonitorModal = true
      this.updateChatServiceStatus()
    },
    
    closeChatQuotaMonitorModal() {
      this.showChatQuotaMonitorModal = false
    },
    
    getServiceDisplayName(service) {
      const nameMap = {
        'firebase': 'Firebase',
        'supabase': 'Supabase',
        'local': '本地存储'
      }
      return nameMap[service] || service
    },
    
    // 公告相关方法
    showCreateAnnouncementModal() {
      this.showAnnouncementModal = true
      this.newAnnouncement = {
        title: '',
        content: '',
        type: 'info'
      }
    },
    
    closeAnnouncementModal() {
      this.showAnnouncementModal = false
    },
    
    showTypeSelector() {
      this.showTypeSelectorModal = true
    },
    
    closeTypeSelector() {
      this.showTypeSelectorModal = false
    },
    
    selectAnnouncementType(index) {
      this.announcementTypeIndex = index
      this.closeTypeSelector()
    },
    
    async publishAnnouncement() {
      if (!this.newAnnouncement.title.trim()) {
        uni.showToast({
          title: '请输入公告标题',
          icon: 'none'
        })
        return
      }
      
      if (!this.newAnnouncement.content.trim()) {
        uni.showToast({
          title: '请输入公告内容',
          icon: 'none'
        })
        return
      }
      
      try {
        // 获取当前用户信息
        const currentUser = uni.getStorageSync('currentUser')
        if (!currentUser) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        
        const userData = JSON.parse(currentUser)
        
        // 准备公告数据
        const announcementData = {
          title: this.newAnnouncement.title,
          content: this.newAnnouncement.content,
          type: this.announcementTypes[this.announcementTypeIndex].toLowerCase(),
          priority: 0,
          author_id: userData.id,
          author_name: userData.name
        }
        
        // 调用API创建公告
        const response = await apiService.createAnnouncement(announcementData)
        if (response.code === 'SUCCESS') {
          // 发布公告
          await apiService.publishAnnouncement(response.data.id)
          
          uni.showToast({
            title: '公告发布成功',
            icon: 'success'
          })
          
          this.closeAnnouncementModal()
          
          // 重新加载公告列表
          this.loadAnnouncements()
        } else {
          throw new Error(response.message || '创建公告失败')
        }
        
      } catch (error) {
        console.error('发布公告失败:', error)
        uni.showToast({
          title: '发布失败: ' + (error.message || '未知错误'),
          icon: 'error'
        })
      }
    },
    
    // 用户搜索相关方法
    showUserSearchModal() {
      this.showUserSearchModal = true
      this.searchKeyword = ''
      this.searchResults = []
    },
    
    closeUserSearchModal() {
      this.showUserSearchModal = false
    },
    
    async searchUsers() {
      if (!this.searchKeyword.trim()) {
        this.searchResults = []
        return
      }
      
      try {
        // 调用管理员API搜索用户
        const response = await apiService.getAdminUserList({
          keyword: this.searchKeyword,
          page: 1,
          pageSize: 20
        })
        if (response.code === 'SUCCESS') {
          this.searchResults = response.data.users || []
        } else {
          console.error('搜索用户失败:', response.message)
          this.searchResults = []
        }
      } catch (error) {
        console.error('搜索用户失败:', error)
        this.searchResults = []
      }
    },
    
    showSystemStatusModal() {
      uni.showModal({
        title: '系统状态',
        content: `服务器状态: ${appStateManager.getState('server').isOnline ? '在线' : '离线'}\n用户总数: ${this.userStats.totalUsers}\n活跃用户: ${this.userStats.activeUsers}`,
        showCancel: false
      })
    },
    
    // 工具方法 - 动态获取角色文本
    getRoleText(role) {
      // 优先从后端加载的角色列表中查找
      const foundRole = this.availableRoles.find(r => r.value === role)
      if (foundRole) {
        return foundRole.label
      }
      
      // 后备：使用硬编码映射
      const roleMap = {
        'admin': '管理员',
        'moderator': '版主',
        'user': '普通用户'
      }
      return roleMap[role] || '未知角色'
    },
    
    getRoleClass(role) {
      // 使用常量文件中的函数
      return getRoleClass(role)
    },
    
    getStatusText(status) {
      const statusMap = {
        'active': '正常',
        'banned': '封禁',
        'deleted': '已删除'
      }
      return statusMap[status] || '未知'
    },
    
    getStatusClass(status) {
      const classMap = {
        'active': 'status-active',
        'banned': 'status-banned',
        'deleted': 'status-deleted'
      }
      return classMap[status] || 'status-unknown'
    },
    
    formatDate(dateString) {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.admin-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}

/* 管理员头部 */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.header-content {
  flex: 1;
}

.admin-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2d3436;
  display: block;
  margin-bottom: 8rpx;
}

.admin-subtitle {
  font-size: 24rpx;
  color: #636e72;
}

.admin-badge {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

.badge-text {
  color: white;
  font-size: 20rpx;
  font-weight: bold;
}

/* 统计概览 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  margin-bottom: 30rpx;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 20rpx;
  color: #636e72;
}

.stat-note {
  font-size: 16rpx;
  color: #999;
  margin-top: 4rpx;
  font-style: italic;
  display: block;
}

/* 功能菜单 */
.admin-menu {
  margin-bottom: 30rpx;
}

.menu-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.menu-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.menu-item:active {
  transform: scale(0.95);
}

.menu-icon {
  font-size: 40rpx;
  display: block;
  margin-bottom: 12rpx;
}

.menu-name {
  font-size: 24rpx;
  font-weight: bold;
  color: #2d3436;
  display: block;
  margin-bottom: 8rpx;
}

.menu-desc {
  font-size: 20rpx;
  color: #636e72;
  line-height: 1.4;
}

/* 快速操作 */
.quick-actions {
  margin-bottom: 30rpx;
}

.action-buttons {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 20rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.action-btn.secondary {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
}

.action-btn.warning {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
}

.action-btn:active {
  transform: scale(0.95);
}

.btn-icon {
  font-size: 24rpx;
}

.btn-text {
  font-size: 22rpx;
}

/* 最近活动 */
.recent-activities {
  margin-bottom: 30rpx;
}

.activity-list {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.activity-icon.user {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
}

.activity-icon.announcement {
  background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
}

.activity-icon.permission {
  background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
}

.icon-text {
  font-size: 24rpx;
  color: white;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 24rpx;
  color: #2d3436;
  display: block;
  margin-bottom: 4rpx;
}

.activity-time {
  font-size: 20rpx;
  color: #636e72;
}

.activity-status {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 18rpx;
}

.activity-status.success {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}

.activity-status.warning {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.status-text {
  font-size: 18rpx;
  font-weight: bold;
}

/* 弹窗样式 */
/* 表单样式 */
.form-group {
  margin-bottom: 24rpx;
}

.form-label {
  font-size: 24rpx;
  color: #2d3436;
  display: block;
  margin-bottom: 8rpx;
  font-weight: bold;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 24rpx;
  background: white;
}

.form-input:focus, .form-textarea:focus {
  border-color: #667eea;
}

.form-textarea {
  height: 120rpx;
  resize: none;
}

.type-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.type-selector:active {
  border-color: #667eea;
}

.type-text {
  font-size: 24rpx;
  color: #2d3436;
}

.type-arrow {
  font-size: 20rpx;
  color: #999;
}

/* 搜索相关样式 */
.search-section {
  margin-bottom: 24rpx;
}

.search-input {
  width: 100%;
  padding: 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 24rpx;
  background: white;
}

.search-results {
  max-height: 400rpx;
  overflow-y: auto;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.user-item:last-child {
  border-bottom: none;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.avatar-text {
  color: white;
  font-size: 24rpx;
  font-weight: bold;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 24rpx;
  color: #2d3436;
  display: block;
  margin-bottom: 4rpx;
}

.user-email {
  font-size: 20rpx;
  color: #636e72;
}

.user-role {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 18rpx;
}

.role-admin {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.role-user {
  background: rgba(116, 185, 255, 0.1);
  color: #74b9ff;
}

.role-text {
  font-size: 18rpx;
  font-weight: bold;
}

/* 聊天服务配置样式 */
.config-section {
  margin-bottom: 24rpx;
}

.config-title {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.service-options {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.service-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.service-option.selected {
  border-color: #4facfe;
  background: rgba(79, 172, 254, 0.1);
}

.service-name {
  font-size: 24rpx;
  color: #333;
}

.check-icon {
  font-size: 24rpx;
  color: #4facfe;
  font-weight: bold;
}

/* 额度监控样式 */
.quota-section {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.quota-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.quota-label {
  font-size: 24rpx;
  color: #666;
}

.quota-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

/* 类型选择器弹窗样式 */
.type-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5rpx);
}

.type-selector-modal {
  width: 80%;
  max-width: 500rpx;
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.type-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #f8f9fa;
}

.type-selector-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #2d3436;
}

.type-selector-close {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #e74c3c;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-selector-content {
  padding: 16rpx 0;
}

.type-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.type-option:last-child {
  border-bottom: none;
}

.type-option:active {
  background-color: #f8f9fa;
}

.type-option.selected {
  background-color: rgba(102, 126, 234, 0.1);
}

.type-option-text {
  font-size: 24rpx;
  color: #2d3436;
}

.type-option-check {
  font-size: 24rpx;
  color: #667eea;
  font-weight: bold;
}

/* 用户列表弹窗样式 */
.user-list-modal {
  width: 95%;
  max-width: 800rpx;
  max-height: 90%;
  z-index: 1001;
}

/* 确保用户列表弹窗不会遮挡picker */
.user-list-modal .search-section {
  position: relative;
  z-index: 1001;
}

/* Picker下拉菜单样式 - 第二层，显示在用户列表弹窗之上 */
.filter-picker {
  position: relative;
  z-index: 2000;
}

/* 确保picker的下拉选项能显示在第二层 */
picker {
  position: relative;
  z-index: 2000;
}

/* Picker下拉选项容器 - 第二层 */
.filter-item {
  position: relative;
  z-index: 2000;
}

/* 确保picker的下拉选项显示在用户列表弹窗之上 */
.filter-item picker {
  position: relative;
  z-index: 2000;
}

/* Picker下拉选项的容器 */
.filter-item picker view {
  position: relative;
  z-index: 2000;
}

.search-section {
  margin-bottom: 24rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.search-row {
  display: flex;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.search-input {
  flex: 1;
  padding: 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 24rpx;
  background: white;
}

.search-btn {
  padding: 16rpx 24rpx;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.filter-row {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.filter-label {
  font-size: 22rpx;
  color: #666;
}

.filter-picker {
  padding: 8rpx 16rpx;
  background: white;
  border: 2rpx solid #e0e0e0;
  border-radius: 6rpx;
  font-size: 22rpx;
  color: #333;
}

.reset-btn {
  padding: 8rpx 16rpx;
  background: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 6rpx;
  font-size: 22rpx;
}

.user-list-section {
  max-height: 600rpx;
  overflow-y: auto;
}

.loading-section, .empty-section {
  text-align: center;
  padding: 40rpx;
}

.loading-text, .empty-text {
  font-size: 24rpx;
  color: #999;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: white;
  border-radius: 12rpx;
  border: 2rpx solid #f0f0f0;
  transition: all 0.3s ease;
}

.user-item:active {
  background: #f8f9fa;
  border-color: #667eea;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.avatar-text {
  color: white;
  font-size: 28rpx;
  font-weight: bold;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.user-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}

.user-email {
  font-size: 22rpx;
  color: #666;
}

.user-time {
  font-size: 20rpx;
  color: #999;
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  align-items: flex-end;
}

.user-role, .user-status {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.role-admin {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.role-moderator {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.role-user {
  background: rgba(116, 185, 255, 0.1);
  color: #74b9ff;
}

.status-active {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}

.status-banned {
  background: rgba(244, 67, 54, 0.1);
  color: #F44336;
}

.status-deleted {
  background: rgba(158, 158, 158, 0.1);
  color: #9E9E9E;
}

.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

.pagination-text {
  font-size: 22rpx;
  color: #666;
}

.pagination-buttons {
  display: flex;
  gap: 12rpx;
}

.page-btn {
  padding: 12rpx 20rpx;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6rpx;
  font-size: 22rpx;
}

.page-btn:disabled {
  background: #ccc;
  color: #999;
}

/* 全局弹窗组件使用的业务样式 */
.selector-list {
  padding: 16rpx 0;
}

.selector-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.selector-item:last-child {
  border-bottom: none;
}

.selector-item:active {
  background-color: #f8f9fa;
}

.selector-item.selected {
  background-color: rgba(102, 126, 234, 0.1);
}

.selector-text {
  font-size: 24rpx;
  color: #2d3436;
}

.selector-check {
  font-size: 24rpx;
  color: #667eea;
  font-weight: bold;
}

/* 更新picker样式 */
.filter-picker {
  padding: 8rpx 16rpx;
  background: white;
  border: 2rpx solid #e0e0e0;
  border-radius: 6rpx;
  font-size: 22rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 120rpx;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.filter-picker:active {
  border-color: #667eea;
}

.picker-arrow {
  font-size: 20rpx;
  color: #999;
  margin-left: 8rpx;
}

/* 编辑用户内容样式 */
.edit-user-content {
  flex: 1;
  overflow-y: auto;
  padding: 24rpx;
}

.user-info-section {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}

.user-avatar-large {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.avatar-text-large {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.user-detail-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.user-detail-email {
  font-size: 24rpx;
  color: #666;
}

.user-detail-time {
  font-size: 22rpx;
  color: #999;
}

.edit-section {
  margin-bottom: 24rpx;
}

.role-selector, .status-selector {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin-top: 12rpx;
}

.role-option, .status-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  transition: all 0.3s ease;
  cursor: pointer;
}

.role-option:active, .status-option:active {
  transform: scale(0.98);
}

.role-option.selected, .status-option.selected {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.role-option-text, .status-option-text {
  font-size: 24rpx;
  color: #333;
}

.role-option-check, .status-option-check {
  font-size: 24rpx;
  color: #667eea;
  font-weight: bold;
}

/* 编辑按钮样式 - 用于全局弹窗的footer插槽 */
.edit-btn, .modal-btn {
  flex: 1;
  padding: 16rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.edit-btn.cancel, .modal-btn.cancel {
  background: #f0f0f0;
  color: #666;
}

.edit-btn.save, .modal-btn.confirm {
  background: #667eea;
  color: white;
}

.edit-btn:active, .modal-btn:active {
  transform: scale(0.95);
}
</style>
